<template>

    <!-- 用户导入结果对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="400px" top="30vh" append-to-body :close-on-click-modal="false">
      <div class="import_result">
        <div class="info"><span class="label">导入文件: </span><span style="font-weight:bold;">{{resultData.originalFilename}}</span></div>
        <div class="info"><span class="label">导入批次: </span><span :style="themeColor">{{resultData.batchNo}}</span></div>
        <div class="info"><span class="label">解析数据: </span>共 <span :style="themeColor">{{resultData.totalCount}}</span> 条，成功 <span style="color:#13e872;">{{resultData.successCount}}</span> 条，失败 <span style="color:red;">{{resultData.failCount}}</span> 条！</div>
        <div v-if="!resultData.successAll && resultData.resultDetail"  class="info">
          <el-link type="primary" @click="downloadDetail">下载导入结果明细</el-link>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </lam-dialog>

</template>
<style>
  .import_result{
  }

  .import_result .info{
    line-height: 25px;
  }
  .import_result .info .label{
    font-weight:bold;
  }

</style>
<script>
  export default {
    name: "ImportResult",
    data() {
      return {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        resultData:{}
      };
    },
    created() {
    },
    computed:{
      themeColor(){
        return {
          color: this.$store.state.settings.theme
        }
      },
    },
    methods: {
      /** 打开弹窗 */
      openDialog(op) {
        op = Object.assign({title:""}, op);
        this.title = op.title;
        this.resultData = op.data;
        this.open = true;
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      /** 下载导入结果明细 */
      downloadDetail() {
        this.$commonDownload(this.resultData.resultDetail);
      }
    },
  };
</script>

<style>
</style>
